import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import '../../data/datasources/function_items_data.dart';
import 'function_item_widget.dart';


/// `FunctionsSection` 是一个显示常用功能网格的组件。
///
/// 它使用了 `HookWidget`，这是 `flutter_hooks` 包提供的一个特殊 Widget，
/// 可以在 `build` 方法中使用 Hooks（例如 `useState`, `useEffect`），
/// 从而在无状态组件中管理局部状态，避免了创建 `StatefulWidget` 的样板代码。
///
/// - **功能列表**: 功能项从 `function_items_data.dart` 加载，实现了数据与UI的分离。
/// - **响应式布局**: 使用 `LayoutBuilder` 和 `GridView.builder` 创建响应式网格布局，
///   根据可用宽度动态调整列数。
/// - **点击交互**: 每个功能项都支持点击事件，并显示一个 `SnackBar` 作为反馈。
///
/// 使用 `HookWidget` 展示一个常用功能网格，例如“洁清”、“交班”和“日结”。
/// - **功能列表**: 功能项从 `function_items_data.dart` 加载，实现了数据与UI的分离。
/// - **网格布局**: 使用 `GridView.builder` 创建响应式网格布局。
/// - **点击交互**: 每个功能项都支持点击事件，并显示一个 `SnackBar` 提示。
class FunctionsSection extends HookWidget {
  /// `FunctionsSection` 的构造函数。
  const FunctionsSection({super.key});

  @override
  Widget build(BuildContext context) {
    // 使用 `Column` 垂直排列标题和功能网格。
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('常用功能',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        const SizedBox(height: 20),
        // `LayoutBuilder` 用于获取父组件的约束，以实现响应式布局。
        LayoutBuilder(
          builder: (context, constraints) {
            // 根据可用宽度动态计算列数。
            int crossAxisCount = (constraints.maxWidth / 100).floor();
            if (crossAxisCount < 1) crossAxisCount = 1; // 至少保证一列。

            // `GridView.builder` 用于高效地构建网格。
            return GridView.builder(
              // `shrinkWrap: true` 和 `NeverScrollableScrollPhysics` 用于将 GridView 嵌入到
              // 另一个可滚动组件（如 Column）中，并禁用其自身的滚动。
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // 动态列数
                crossAxisCount: crossAxisCount,
                mainAxisSpacing: 5,
                crossAxisSpacing: 5,
                // 子项宽高比，1.0 表示正方形
                childAspectRatio: 1.0,
              ),
              itemCount: functionItems.length,
              itemBuilder: (context, index) {
                final item = functionItems[index];
                // 为每个功能数据创建一个 `FunctionItemWidget`。
                return FunctionItemWidget(
                  item: item,
                  // 定义点击回调，点击时显示一个 SnackBar。
                  onTap: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Tapped on ${item.label}')),
                    );
                  },
                );
              },
            );
          },
        ),
      ],
    );
  }
}